package com.zy.composeworld.ui.screens.image.image

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.BlurredEdgeTreatment
import androidx.compose.ui.draw.blur
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Rect
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.BlendMode
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.ColorMatrix
import androidx.compose.ui.graphics.CompositingStrategy
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.Outline
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.TransformOrigin
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.drawscope.clipPath
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.layout.onSizeChanged
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.res.vectorResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Density
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.unit.toSize
import coil.compose.AsyncImage
import com.zy.composeworld.R
import kotlin.math.roundToInt


@OptIn(ExperimentalFoundationApi::class)
@Preview
@Composable
fun ImagePager005() {

    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
    ) {

        item {
            TextHead(text = "Modifier.drawBehind：在可组合项后面绘制")


            Text(
                "Hello Compose!",
                modifier = Modifier
                    .drawBehind {
                        drawRoundRect(
                            Color(0xFFBBAAEE),
                            cornerRadius = CornerRadius(10.dp.toPx())
                        )
                    }
                    .padding(4.dp)
            )
        }

        item {
            TextHead(text = "Modifier.drawWithCache：绘制和缓存绘制对象")

            Text(
                "Hello Compose!",
                modifier = Modifier
                    .drawWithCache {
                        val brush = Brush.linearGradient(
                            listOf(
                                Color(0xFF9E82F0),
                                Color(0xFF42A5F5)
                            )
                        )
                        onDrawBehind {
                            drawRoundRect(
                                brush,
                                cornerRadius = CornerRadius(10.dp.toPx())
                            )
                        }
                    }
                    .padding(8.dp)
            )
        }
        item {

            TextHead(text = "缩放 - 增加大小")
            Row {

                Image(
                    painter = painterResource(id = R.drawable.ic_persion),
                    contentDescription = "Sunset",
                )

                Image(
                    painter = painterResource(id = R.drawable.ic_persion),
                    contentDescription = "Sunset",
                    modifier = Modifier
                        .graphicsLayer {
                            this.scaleX = 1.2f
                            this.scaleY = 0.8f
                        }
                )
            }

        }
        item {
            TextHead(text = "平移")
            Row {

                Image(
                    painter = painterResource(id = R.drawable.ic_persion),
                    contentDescription = "Sunset",
                )

                Image(
                    painter = painterResource(id = R.drawable.ic_persion),
                    contentDescription = "Sunset",
                    modifier = Modifier
                        .graphicsLayer {
                            this.translationX = 100.dp.toPx()
                            this.translationY = 10.dp.toPx()
                        }
                )
            }
        }
        item {

            TextHead(text = "旋转")
            Row {

                Image(
                    painter = painterResource(id = R.drawable.ic_persion),
                    contentDescription = "Sunset",
                )

                Image(
                    painter = painterResource(id = R.drawable.ic_persion),
                    contentDescription = "Sunset",
                    modifier = Modifier
                        .graphicsLayer {
                            this.rotationX = 45f
                            this.rotationY = 45f
                            this.rotationZ = 45f
                        }
                )
            }

        }
        item {
            TextHead(text = "旋转-原点")
            Row {

                Image(
                    painter = painterResource(id = R.drawable.ic_persion),
                    contentDescription = "Sunset",
                )

                Image(
                    painter = painterResource(id = R.drawable.ic_persion),
                    contentDescription = "Sunset",
                    modifier = Modifier
                        .graphicsLayer {
                            this.transformOrigin = TransformOrigin(0f, 0f)
                            this.rotationX = 45f
                            this.rotationY = 45f
                        }
                )
            }

        }
        item {
            TextHead(text = "裁剪和形状")
            Column(
                modifier = Modifier
                    .padding(16.dp)
                    .border(1.dp, Color.Black)
            ) {
                Box(
                    modifier = Modifier
                        .size(200.dp)
                        .graphicsLayer {
                            clip = true
                            shape = CircleShape
                        }
                        .background(Color(0xFFF06292))
                ) {
                    Text(
                        "Hello Compose",
                        style = TextStyle(color = Color.Black, fontSize = 46.sp),
                        modifier = Modifier.align(Alignment.Center)
                    )
                }
                Box(
                    modifier = Modifier
                        .size(200.dp)
                        .clip(CircleShape)
                        .background(Color(0xFF4DB6AC))
                )
            }



            Column(
                modifier = Modifier
                    .padding(16.dp)
                    .border(1.dp, Color.Black)
            ) {
                Box(
                    modifier = Modifier
                        .size(200.dp)
                        .border(2.dp, Color.Black)
                        .graphicsLayer {
                            clip = true
                            shape = CircleShape
                            translationY = 50.dp.toPx()
                        }
                        .background(Color(0xFFF06292))
                ) {
                    Text(
                        "Hello Compose",
                        style = TextStyle(color = Color.Black, fontSize = 46.sp),
                        modifier = Modifier.align(Alignment.Center)
                    )
                }

                Box(
                    modifier = Modifier
                        .size(200.dp)
                        .clip(RoundedCornerShape(500.dp))
                        .background(Color(0xFF4DB6AC))
                )
            }



            Column(
                modifier = Modifier
                    .padding(16.dp)
                    .border(1.dp, Color.Black)
            ) {
                Box(
                    modifier = Modifier
                        .clip(RectangleShape)
                        .size(200.dp)
                        .border(2.dp, Color.Black)
                        .graphicsLayer {
                            clip = true
                            shape = CircleShape
                            translationY = 50.dp.toPx()
                        }
                        .background(Color(0xFFF06292))
                ) {
                    Text(
                        "Hello Compose",
                        style = TextStyle(color = Color.Black, fontSize = 46.sp),
                        modifier = Modifier.align(Alignment.Center)
                    )
                }

                Box(
                    modifier = Modifier
                        .size(200.dp)
                        .clip(RoundedCornerShape(500.dp))
                        .background(Color(0xFF4DB6AC))
                )
            }
        }


        item {
            TextHead(text = "alpha 值")
            Row {

                Image(
                    painter = painterResource(id = R.drawable.ic_persion),
                    contentDescription = "Sunset",
                )

                Image(
                    painter = painterResource(id = R.drawable.ic_persion),
                    contentDescription = "Sunset",
                    modifier = Modifier
                        .graphicsLayer {
                            this.alpha = 0.3f
                        }
                )

                Image(
                    painter = painterResource(id = R.drawable.ic_persion),
                    contentDescription = "Sunset",
                    modifier = Modifier
                        .graphicsLayer {
                            this.alpha = 0.6f
                        }
                )
            }
        }

        item {
            TextHead(text = "alpha 值")
            Row {
                Image(painter = painterResource(id = R.drawable.ic_dog1),
                    contentDescription = "Dog",
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .size(120.dp)
                        .aspectRatio(1f)
                        .background(
                            Brush.linearGradient(
                                listOf(
                                    Color(0xFFC5E1A5),
                                    Color(0xFF80DEEA)
                                )
                            )
                        )
                        .padding(8.dp)
                        .graphicsLayer {
                            compositingStrategy = CompositingStrategy.Offscreen
                        }
                        .drawWithCache {
                            val path = Path()
                            path.addOval(
                                Rect(
                                    topLeft = Offset.Zero,
                                    bottomRight = Offset(size.width, size.height)
                                )
                            )
                            onDrawWithContent {
                                clipPath(path) {
                                    // this draws the actual image - if you don't call drawContent, it wont
                                    // render anything
                                    this@onDrawWithContent.drawContent()
                                }
                                val dotSize = size.width / 8f
                                // Clip a white border for the content
                                drawCircle(
                                    Color.Black,
                                    radius = dotSize,
                                    center = Offset(
                                        x = size.width - dotSize,
                                        y = size.height - dotSize
                                    ),
                                    blendMode = BlendMode.Clear
                                )
                                // draw the red circle indication
                                drawCircle(
                                    Color(0xFFEF5350), radius = dotSize * 0.8f,
                                    center = Offset(
                                        x = size.width - dotSize,
                                        y = size.height - dotSize
                                    )
                                )
                            }

                        }
                )


                Image(painter = painterResource(id = R.drawable.ic_dog1),
                    contentDescription = "Dog",
                    contentScale = ContentScale.Crop,
                    modifier = Modifier
                        .size(120.dp)
                        .aspectRatio(1f)
                        .background(
                            Brush.linearGradient(
                                listOf(
                                    Color(0xFFC5E1A5),
                                    Color(0xFF80DEEA)
                                )
                            )
                        )
                        .padding(8.dp)
                        .graphicsLayer {
                        }
                        .drawWithCache {
                            val path = Path()
                            path.addOval(
                                Rect(
                                    topLeft = Offset.Zero,
                                    bottomRight = Offset(size.width, size.height)
                                )
                            )
                            onDrawWithContent {
                                clipPath(path) {
                                    // this draws the actual image - if you don't call drawContent, it wont
                                    // render anything
                                    this@onDrawWithContent.drawContent()
                                }
                                val dotSize = size.width / 8f
                                // Clip a white border for the content
                                drawCircle(
                                    Color.Black,
                                    radius = dotSize,
                                    center = Offset(
                                        x = size.width - dotSize,
                                        y = size.height - dotSize
                                    ),
                                    blendMode = BlendMode.Clear
                                )
                                // draw the red circle indication
                                drawCircle(
                                    Color(0xFFEF5350), radius = dotSize * 0.8f,
                                    center = Offset(
                                        x = size.width - dotSize,
                                        y = size.height - dotSize
                                    )
                                )
                            }

                        }
                )
            }

        }
    }

}


@Composable
private fun TextHead(text: String) {
    Text(text, fontWeight = FontWeight.Bold, color = Color.Red)
}